<template>
    <div class="admin-page">
        <div class="page-header">
            <div style="display: flex;justify-content: space-between">
                <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-bottom: 15px;">
                    <div style="display: flex; align-items: center;" class="search-item">
                        <span class="search-label">日期:</span>
                        <el-date-picker
                            v-model="searchForm.date"
                            type="date"
                            size="small"
                            style="width: 130px;"
                            placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div style="display: flex; align-items: center;" class="search-item">
                        <span class="search-label">变动类型:</span>
                        <el-select v-model="searchForm.type" size="small" style="width: 110px;" placeholder="全部" clearable>
                            <el-option
                                v-for="item in typeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
                    <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
                    <el-button type="success" size="small" style="margin-left: 10px;" @click="handleReset">重置</el-button>
                </div>
            </div>
            <el-table :data="tableData" height="560" border style="width: 100%;overflow-y: auto"
                      :header-cell-style="{background:'#FAFAFA',color:'#666', fontSize:'13px'}" size="small">
                <el-table-column prop="id" label="ID" width="80" align="center"/>
                <el-table-column prop="amount" label="变动金额" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.amount.toFixed(2) }}
                    </template>
                </el-table-column>
                <el-table-column prop="before_amount" label="变动前" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.before_amount.toFixed(2) }}
                    </template>
                </el-table-column>
                <el-table-column prop="after_amount" label="变动后" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.after_amount.toFixed(2) }}
                    </template>
                </el-table-column>
                <el-table-column prop="change_time" label="变动时间" align="center" width="150"/>
                <el-table-column prop="order_id" label="关联订单" align="center" width="120"/>
                <el-table-column prop="change_type" label="变动类型" align="center" width="100">
                    <template slot-scope="scope">
                        {{ ['充值', '消费', '返利'][scope.row.change_type - 1] }}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="在途类型" align="center" width="100">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status ? 'success' : 'info'">
                            {{ scope.row.status ? '已完成' : '处理中' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="说明" align="center"/>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="total"
            />
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        date: '',
        type: ''
      },
      tableData: [],
      typeOptions: [
        { label: '全部', value: '' },
        { label: '充值', value: 1 },
        { label: '消费', value: 2 },
        { label: '返利', value: 3 }
      ],
      currentPage: 1,
      pageSize: 15,
      total: 0
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    getTableData() {
      // 模拟数据，实际项目中替换为API调用
      const now = new Date()
      this.tableData = Array(10).fill(null).map((_, index) => ({
        id: index + 1,
        amount: Math.floor(Math.random() * 1000),
        before_amount: Math.floor(Math.random() * 10000),
        after_amount: Math.floor(Math.random() * 10000),
        change_time: `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`,
        order_id: `ORD${Math.floor(Math.random() * 1000000)}`,
        change_type: Math.floor(Math.random() * 3) + 1,
        status: Math.random() > 0.5 ? 1 : 0,
        remark: '余粮变动说明'
      }))
    },
    handleSearch() {
      this.getTableData()
    },
    handleReset() {
      this.searchForm = {
        date: '',
        type: ''
      }
      this.getTableData()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTableData()
    }
  }
}
</script>

<style scoped lang="less">
.admin-page {
  padding: 20px;

  .search-label {
    margin-right: 10px;
    color: #606266;
  }

  .el-table {
    margin-top: 20px;
  }

  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
}
</style>
